<template>
  <el-dialog
    title="车辆详情"
    :visible.sync="dialogVisible"
    width="828px"
    class="dialogTitle"
    @closed="dialogClosed('detailForm')"
  >
    <div v-loading="loading">
      <el-form label-width="140px" ref="detailForm" :model="dialogData">
        <el-form-item label="车辆联系人" prop="carContacts">
          <el-input v-model="dialogData.carContacts" :disabled="true"></el-input>
          <!-- <el-select
          v-model="dialogData.carContacts"
          placeholder="请选择"
          clearable
          class="form-select"
          disabled
        >
          <el-option
            v-for="item in dialogData.carContactOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        </el-form-item>
        <el-form-item label="车辆联系人联系方式" prop="carContactsPhone">
          <el-input v-model="dialogData.carContactsPhone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车辆联系人身份证号" prop="carContactsIDNumber">
          <el-input v-model="dialogData.carContactsIDNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车 牌 号 码" prop="carPhone">
          <el-input v-model="dialogData.carPhone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车 辆 颜 色" prop="carColor">
          <el-input v-model="dialogData.carColor" :disabled="true"></el-input>
          <!-- <el-select
          v-model="dialogData.carColor"
          placeholder="请选择"
          clearable
          class="form-select"
          disabled
        >
          <el-option
            v-for="item in dialogData.carColorOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="手 机 号 码" prop="phone">
        <el-input v-model="dialogData.phone" :disabled="true"></el-input>
      </el-form-item> -->
        <el-form-item label="车 辆 类 型" prop="carTypeValue">
          <el-input v-model.trim="dialogData.carTypeValue" :disabled="true"></el-input>
          <!-- <el-select v-model="dialogData.carTypeValue" class="form-select" clearable disabled>
          <el-option
            v-for="item in dialogData.carType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        </el-form-item>
        <el-form-item label="证件有效期" prop="validityTime">
          <el-date-picker
            v-model="dialogData.validityTime"
            align="right"
            type="date"
            class="datePicker"
            placeholder="选择日期"
            :picker-options="dialogData.pickerOptions"
            value-format="yyyy-MM-dd"
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="轴数" prop="axesNum">
          <label slot="label"
            >轴&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数</label
          >
          <el-input v-model="dialogData.axesNum" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所 属 企 业" prop="enterprise">
          <el-input v-model="dialogData.enterprise" :disabled="true"></el-input>
          <!-- <el-select v-model="dialogData.enterprise" class="form-select" clearable disabled>
          <el-option
            v-for="item in dialogData.enterpriseOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
        </el-form-item>
        <el-form-item label="车 辆 状 态" prop="carStatusValue">
          <el-select v-model="dialogData.carStatusValue" class="form-select" clearable disabled>
            <el-option
              v-for="item in dialogData.carStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" class="spacingL" prop="remarks">
          <label slot="label"
            >备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label
          >
          <el-input v-model="dialogData.remarks" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <!-- <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick('detailForm')"
        btnText="确定"
        class="confirm_btn dialog_btn"
      />
      <cs-btn @click.native="cancelBtnClick('detailForm')" btnText="取消" class="dialog_btn" />
    </div> -->
      <div>
        <span class="stepsTitle">15天内违法历史记录</span>

        <cs-steps :recordData="dialogData.recordData" @handleMoreBtnClick="handleMoreBtnClick" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import csSteps from '@/components/cs-steps/cs-steps.vue'

// import { getContactsName } from '@/service/operate/user_manage/user_manage'
// import { getAllEnterpriseName } from '@/service/source_manage/enterprise_manage'
import { getCarDetailByCarNumber } from '@/service/operate/cart_manage/cart_manage'
import { toPercentage } from '@/utils/dataConversion'

export default {
  components: {
    csSteps
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dialogData: {
        carContacts: '',
        // carContactOption: [],
        carPhone: '',
        carColor: '',
        // carColorOption: [
        //   {
        //     value: '蓝色',
        //     label: '蓝色'
        //   },
        //   {
        //     value: '黄色',
        //     label: '黄色'
        //   },
        //   {
        //     value: '绿色',
        //     label: '绿色'
        //   }
        // ],
        // phone: '',
        // carType: [
        //   {
        //     value: '执法suv车',
        //     label: '执法suv车'
        //   },
        //   {
        //     value: '执法轿车',
        //     label: '执法轿车'
        //   }
        // ],
        carTypeValue: '',
        validityTime: '',
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        axesNum: '',
        enterprise: '',
        // enterpriseOption: [],
        carStatus: [
          {
            value: 0,
            label: '正常'
          },
          {
            value: 1,
            label: '异常'
          }
        ],
        carStatusValue: '',
        remarks: '',
        recordData: []
      }
    }
  },
  created() {
    // // 查询所有车辆联系人
    // this.getContactsName()
    // // 获取所有企业名称
    // this.getAllEnterpriseName()
    // 根据车牌号获取信息
    this.$bus.$on('cartDetailVisible', (carNumber) => {
      this.getCarDetailByCarNumber(carNumber)
      this.dialogVisible = true
    })
  },
  methods: {
    // 对话框关闭事件
    dialogClosed(formName) {
      this.resetForm(formName)
      // this.$bus.$off('carManageJunkToDetail')
    },
    confirmBtnClick(formName) {
      this.dialogVisible = false
      this.resetForm(formName)
    },
    cancelBtnClick(formName) {
      this.dialogVisible = false
      this.resetForm(formName)
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleMoreBtnClick(id) {
      // this.$router.push({
      //   path: '/home/data_search/detail',
      //   query: {
      //     id,
      //     dataId: this.dialogData.id,
      //     fromSource: 'car'
      //   }
      // })
      this.$bus.$emit('carManageJunkToDetail', {
        id,
        dataId: this.dialogData.id,
        carNumber: this.dialogData.carPhone,
        fromSource: 'car'
      })
    },
    // 查询所有车辆联系人
    // async getContactsName() {
    //   try {
    //     const { data } = await getContactsName()
    //     if (data.code === 0) {
    //       // 遍历所有责任人数据，组成下拉框选项数据
    //       data.data.forEach((item) => {
    //         this.dialogData.carContactOption.push({ value: item, label: item })
    //       })
    //     }
    //   } catch (err) {
    //     console.log(err)
    //     this.$message.error('服务器出错了')
    //   }
    // },
    // 获取所有企业名称
    // async getAllEnterpriseName() {
    //   try {
    //     const { data } = await getAllEnterpriseName()
    //     console.log(data)
    //     if (data.code === 0) {
    //       data.data.forEach((item) => {
    //         // 拼接所属企业选项
    //         this.dialogData.enterpriseOption.push({
    //           value: item,
    //           label: item
    //         })
    //       })
    //     }
    //   } catch (err) {
    //     console.log(err)
    //     this.$message.error('服务器出错了')
    //   }
    // },
    async getCarDetailByCarNumber(carNumber, offset = 15) {
      this.loading = true
      try {
        const { code,data } = await getCarDetailByCarNumber({ carNumber, offset })
        if (code === 0) {
          const entity = data.entity
          const recordVoList = data.recordVoList
          console.log(entity)
          console.log(recordVoList)
          // 拼接输入框数据
          this.dialogData.id = entity.id
          this.dialogData.carContacts = entity.contactsName
          this.dialogData.carContactsPhone = entity.contactsPhone
          this.dialogData.carContactsIDNumber = entity.contactsIdCard
          this.dialogData.carPhone = entity.vehicleNumber
          this.dialogData.carColor = entity.color
          // this.dialogData.phone = entity.phone
          this.dialogData.carTypeValue = entity.vehicleType
          this.dialogData.validityTime = entity.expireDate
          this.dialogData.axesNum = entity.axleCount
          this.dialogData.enterprise = entity.companyName
          this.dialogData.carStatusValue = entity.state
          this.dialogData.remarks = entity.remark
          // 拼接cs-steps数据
          this.dialogData.recordData = []
          recordVoList.forEach((item) => {
            // item.ratio = Number(item.ratio).toFixed(2)
            item.time = item.time.split('-')
            item.time = item.time[1] + '-' + item.time[2]
            this.dialogData.recordData.push({
              id: item.id,
              level: this.getStepType(item.overweightType),
              percent: toPercentage(item.ratio).handleNum2 + '%',
              time: item.time,
              carModel: item.siteName
            })
          })
          this.loading = false
        } else {
          this.$message.error('获取车辆详情失败')
          this.loading = false
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取车辆详情失败')
        this.loading = false
      }
    },
    // 判断cs-step的类型
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    }
  }
}
</script>

<style scoped>
.el-select >>> .el-input__inner {
  border-radius: 0;
}

.el-input >>> .el-input__inner {
  border-radius: 0;
}

.el-form-item >>> .el-form-item__label {
  color: #888888;
}

/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.form-select {
  width: 100%;
}

.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}

.datePicker {
  width: 100%;
}

/* 进度条标题 */
.stepsTitle {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 12px;
}

.cs-step {
  width: 752px;
}
</style>
